<script>
  import { DateTime } from 'luxon';
  import { page } from '$app/state';
  import ActiveChannel from '$lib/components/ActiveChannel.svelte';
  import MessageInput from '$lib/components/MessageInput.svelte';
  import { channelsMetaList, messages } from '$lib/store';

  let channel = $derived(page.params.channel);
  let messageRuns = $derived($messages.inChannel(channel));
  let activeChannel;

  function inView(parentElement, element) {
    const parRect = parentElement.getBoundingClientRect();
    const parentTop = parRect.top;
    const parentBottom = parRect.bottom;

    const elRect = element.getBoundingClientRect();
    const elementTop = elRect.top;
    const elementBottom = elRect.bottom;

    return parentTop < elementTop && parentBottom > elementBottom;
  }

  function getLastVisibleMessage() {
    if (activeChannel) {
      const childElements = activeChannel.getElementsByClassName('message');
      const lastInView = Array.from(childElements)
        .reverse()
        .find((el) => {
          return inView(activeChannel, el);
        });
      return lastInView;
    }
  }

  function setLastRead() {
    const lastInView = getLastVisibleMessage();
    if (lastInView) {
      const at = DateTime.fromISO(lastInView.dataset.at);
      $channelsMetaList.updateLastReadAt(channel, at);
    }
  }

  $effect(() => {
    const _ = $messages.inChannel(channel);
    setLastRead();
  });

  function handleKeydown(event) {
    if (event.key === 'Escape') {
      setLastRead(); // TODO: pass in "last message DT"?
    }
  }

  let lastReadCallback = null;

  function onscroll() {
    clearTimeout(lastReadCallback); // Fine if lastReadCallback is null still.
    lastReadCallback = setTimeout(setLastRead, 2 * 1000);
  }
</script>

<svelte:window onkeydown={handleKeydown} />

<div class="active-channel" {onscroll} bind:this={activeChannel}>
  <ActiveChannel {messageRuns} />
</div>
<div class="create-message">
  <MessageInput {channel} />
</div>
